<script setup lang="ts">

import { Plus, Setting, Refresh } from '@element-plus/icons-vue'
import contextMenu from '../components/RightMenu/index'
import addMenu from '../components/IconBox/index'
import { MeunItem } from '@/components/interfaceType'
import { RightMenuItem, ContextMenuOptions } from '@/components/RightMenu/interfaceType'
import setupCenter from '@/components/SetupCenter/index'

import { pageStore } from '@/store/modules/pageConfig'
import { storeToRefs } from 'pinia'

function asdasd() {

  chrome.bookmarks.getTree(function (bookmarkArray) {
    console.log(bookmarkArray);
    alert(...bookmarkArray)
  });
}

let addPath = ref('')

let setupCenterFlag = ref(false)


let configStore = storeToRefs(pageStore())
let { homeList, layout, style,backgroundStyle } = configStore

// setupCenter({})

const items: RightMenuItem[] = [
  {
    label: `切换壁纸`,
    svg: Refresh,
    onClick: () => {
      refreshBackgroundImg()
    }
  },
  {
    label: `设置中心`,
    svg: Setting,
    onClick: () => {
      setupCenterFlag.value = true
      setupCenter({}).then(() => {
        setupCenterFlag.value = false
      })
    }
  }
]
const options: ContextMenuOptions = {
  items
}

//鼠标点击事件
function handleMousedown(e: MouseEvent) {
  if (setupCenterFlag.value) {
    return
  }
  let target = e.target as HTMLElement
  options.customItems = []
  addPath.value = target.id
  options.customItems.unshift(
    {
      label: `添加网址`,
      svg: Plus,
      onClick: () => {
        let menu = {
          id: new Date().getTime(),
          name: '',
          url: '',
          title: '',
          iconUrl: '',
          type: 'IconBox'

        }
        addMenu(menu).then((res) => {
          (homeList.value[addPath.value] as MeunItem[]).push(res as MeunItem)
        })
      }
    }
  )
  contextMenu(e, options)
}
let bImage = ref('')
function refreshBackgroundImg() {
  let url = 'https://api.vvhan.com/api/wallpaper/views?type=json'
  ajaxRequest.get({
    url: url,
    submitAgainValidation: true,
    submitAgainTime: 3000
  }).then((res: any) => {
    // {"success":true,"type":"风景","url":"https://api-storage.4ce.cn/v1/a1cd42b2bd007599ae70bc580061a2d8.webp"}
    if (res.success) {
      // bImage.value = res.url
      backgroundStyle.value.backgroundImage = `url(`+res.url+`)`
    }
  })
}

function switchBackground(){
  backgroundStyle.value.backgroundImage = `url(`+bImage.value+`)`
}

let height0 = ref<number>(0)
nextTick(() => {
  let height = document.body.offsetHeight
  if (height > 0) {
    height0.value = height
    document.getElementById('app')!.style.height = height + 'px';
  }
  if (!backgroundStyle.value.backgroundImage || backgroundStyle.value.backgroundImage?.length == 0) {
    refreshBackgroundImg()
  }
}).then(()=>{
  
})

</script>

<template>
  <div style="height: 100%;" @contextmenu.prevent="handleMousedown">
    <div class="main-bg">
      <!-- <img style="display: none;":src="bImage" @load="switchBackground" alt="" /> -->
      <!-- <el-image :src="bImage" @load="switchBackground" /> -->
      <!-- <div class="main-bg-img" style="background-image:url(https://api-storage.4ce.cn/v1/18c2e9613a2cb9d041c63b19ec462b5c.webp);"></div> -->
      <div class="main-bg-img" :style="backgroundStyle"></div>
      <!-- <video class="main-bg-img video" autoplay loop muted
        poster="https://img.omnitab.link/gallery/video/thumb/1v70zgbduikjfw38fnm0.thumbnail.jpg?imageView2/2/w/2640/format/webp/interlace/1"
        src="https://img.omnitab.link/gallery/video/mp4/1v70zgbduikjfw38fnm0.hd.mp4"></video> -->
      <!-- <video class="main-bg-img video" autoplay loop muted
      poster="https://img.omnitab.link/gallery/video/thumb/scddysog1mmu25910vwi.thumbnail.jpg?imageView2/2/w/2640/format/webp/interlace/1"
      src="https://img.omnitab.link/gallery/video/mp4/scddysog1mmu25910vwi.hd.mp4"></video> -->
    </div>

    <!-- <div style="position: fixed;width: 100%;height: 100%;" @contextmenu.stop="">
      <div id="wrapper" @contextmenu.stop=""></div>
    </div> -->
    <div style="height: 100%;display: flex;align-items: center;">
      <el-container style="height:80%" ref="homeListRef">
        <el-header>
          <SearchBox style="width:50%" @contextmenu.stop="" />
        </el-header>
        <el-container style="overflow-y: auto;" :style="style">
          <el-aside v-if="layout.leftAsideBox" min-width="20px" style="width: 360px;">
            <DraggableBox :dragList="homeList.leftAside" label="leftAside" />
          </el-aside>
          <el-container>
            <el-main style="min-width: calc(360px + var(--el-main-padding))">
              <DraggableBox :dragList="homeList.main" label="main" />
            </el-main>
          </el-container>
          <el-aside v-if="layout.rightAsideBox" min-width="20px" style="width: 360px;">
            <DraggableBox :dragList="homeList.rightAside" label="rightAside" />
          </el-aside>
        </el-container>
        <el-footer type="AWordFooter">
          <AWordFooter />
        </el-footer>
      </el-container>
    </div>
  </div>
</template>

<style scoped lang="scss">
.main-bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -2;

  & .main-bg-img {
    width: 100%;
    height: 100%;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(var(--wallpaperS));
    transition: background-image 0.3s, background-color 0.2s, transform 0.3s, opacity 1s cubic-bezier(1, 0, 0.8, 1);
    object-fit: cover;

    &.video {
      /*filter: blur(var(--wallpaperF));*/
    }
  }
}

.el-header {
  display: flex;
  justify-content: center;
}


:deep(.el-container) {
  min-width: auto;
}

:deep(.el-aside) {
  padding-top: var(--el-main-padding);

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  //  width: 360px;
}

:deep(.el-main) {
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

:deep(.el-footer) {
  margin-top: 10px;
  position: absolute;
  bottom: 25px;
  width: 100%;
  color: white;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 1280px) {
  .el-aside {
    display: none;
  }
}
</style>
